<template>
  <div class="dashboard-container">
    <div class="app-container">

    <el-form
        :inline="true"
        v-model="randomsRuleForm"
      >

        <el-form-item label="关键字" label-width="80px">
          <el-input
            v-model="randomsRuleForm.keyword"
            placeholder="根据编号搜索"
            class="input-width"
          />
        </el-form-item>

        <el-form-item class="btns">
          <el-button @click="clear" size="mini">清除</el-button>
          <el-button type="primary" @click="search" size="mini">搜索</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div class="total">
      <i class="el-icon-info"><span class="total-font">共{{ randomsList.counts }}条记录</span></i>
    </div>
    <my-table
      :table-props="{
          data: randomsList.items,
          headerCellStyle: getRowClass
        }"
        :columns="[
          { label: '编号', prop: 'id',  align: 'center' },
          { label: '题型', prop: 'questionType', align: 'center' },
          { label: '题目编号', prop: 'questionIDs',  align: 'center'},
          { label: '录入时间', prop: 'addTime', align: 'center' },
          { label: '答题时间', prop: 'totalSeconds',  align: 'center' },
          { label: '正确率', prop: 'accuracyRate', align: 'center' },
          { label: '录入人', prop: 'userName',  align: 'center' },
          { label: '操作', slotName: 'operators', width: 200, align: 'center' }
        ]"
         :pagination-props="{
          pageSize: pageSize,
          pageSizes: [5, 10, 15, 20],
          background: true,
          total: randomsList.counts,
          layout: '->, prev, pager, next, sizes, jumper'
        }"
        :pagination-events="events"
      >
    >
      <template v-slot:operators="scope">

          <el-button
          @click="edit(scope)"
            type="danger"
            icon="el-icon-delete"
            circle
            plain
        />
        </template>
    </my-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'QuestionsList',
  data () {
    return {
      events: {
        'current-change': this.onCurrentPageChange,
        'size-change': this.onPageSizeChange
      },
      randomsRuleForm: {
        keyword: ''
      },
      provinces: [],
      page: 1,
      pageSize: 5,
      addUserVisible: false
    }
  },
  computed: {
    ...mapState('questions', ['randomsList'])
  },
  created () {
    this.updateRandomsList({
      page: this.page,
      pageSize: this.pageSize
    })

    // this.provinces = cityApi.provinces().map(d => ({
    //   value: d,
    //   label: d
    // }))
  },
  methods: {
    ...mapActions('questions', [
      'updateRandomsList'
    ]),
    Getprovince (value) {
      // this.citys = cityApi.citys(value[0]).map(d => ({
      //   value: d,
      //   label: d
      // }))
      // this.companyRuleForm.province = value[0]
    },
    GetCity (value) {
      // this.companyRuleForm.city = value[0]
    },
    // // 表单清除
    clear () {
      this.companyRuleForm = {
        province: '',
        city: '',
        state: '',
        corporateAbbreviation: '',
        label: ''
      }
    },
    // 搜索
    search () {
      console.log(this.companyRuleForm)
    },
    // 修改按钮
    edit (value) {
      console.log(value)
    },
    // 当前页改变时
    onCurrentPageChange (currentPage) {
      this.page = currentPage
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    onPageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.updataCompanysList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    // 新增用户弹窗
    onAddUser () {
      this.addUserVisible = true
    },
    onAddUserOk () {

    },
    onAddUserClose () {

    },
    getRowClass ({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f8f8f9; border-bottom: 2px solid #dcdcdc'
      }
    },
    questionData (row) {
      const arr = []
      row.questionIDs.forEach((item, i) => {
        if (i > 2) {
          return
        }
        arr.push(item.number)
      })
      return arr.join('\n')
    }
  }
}
</script>

<style lang="sass" scoped>
  .top-cue
    font-size: 12px
    color: #ffb1d1
    height: 50px
    .addbtn
      float: right
  .dashboard-container
    background-color: #fff
    padding: 20px
  .app-container
    padding: 0
  .input-width
    width: 230px
  .btns
    margin-right: 30px
    float: right
  .add
    float: right

  .total
    font-size: 14px
    background-color: #eee
    padding: 8px
    width: calc(100% - 8px)
    border-radius: 5px
    margin-bottom: 20px
    color: #666
    .total-font
      margin-left: 6px
</style>
